<template>
  <a-tree
    class="dataset-tree-container"
    v-model="checkedKeys"
    blockNode
    checkable
    :expanded-keys="expandedKeys"
    :auto-expand-parent="autoExpandParent"
    @expand="onExpand"
    :tree-data="treeData"
    :replaceFields="{ children: 'children', title: 'title', key: 'key' }"
    @select="selectTreeNode"
    @check="treeCheck"
  >
    <template slot="title" slot-scope="{ title }">
      <div class="tree-title" :title="title">
        {{ title }}
      </div>
      <!-- <span
        :class="[showStatus == 0 && 'close', 'state']"
        @click.stop="updateBimStatus(id, showStatus)"
      ></span> -->
    </template>
  </a-tree>
</template>
<script>
export default {
  name: "DataSetTree",
  data() {
    return {
      checkedKeys: [],
      expandedKeys: ["0-0"],
      autoExpandParent: true,
      treeData: [
        {
          title: "强电_立体停车库(光伏支架)_项目北光伏支架光伏支架",
          key: "0-0",
          children: [
            {
              title: "大屋面_常规模型01",
              key: "0-0-0",
            },
            {
              title: "大屋面_常规模型02",
              key: "0-0-1",
            },
            {
              title: "大屋面_常规模型03",
              key: "0-0-2",
            },
            {
              title: "大屋面_常规模型04",
              key: "0-0-3",
            },
            {
              title: "大屋面_常规模型05",
              key: "0-0-4",
            },
            {
              title: "大屋面_常规模型06",
              key: "0-0-5",
            },
            {
              title: "大屋面_常规模型07",
              key: "0-0-6",
            },
            {
              title: "大屋面_常规模型08",
              key: "0-0-7",
            },
          ],
        },
        {
          title: "连云港港赣榆港区东防波堤管廊架延",
          key: "0-1",
          children: [
            { title: "0-1-0-0", key: "0-1-0-0" },
            { title: "0-1-0-1", key: "0-1-0-1" },
            { title: "0-1-0-2", key: "0-1-0-2" },
          ],
        },
        {
          title: "结构_立体停车库(地下)_项目北",
          key: "0-2",
          children: [{ title: "0-1-0-0", key: "0-1-0-0" }],
        },
        {
          title: "结构_立体停车库(上部结构)_项目北",
          key: "0-3",
          children: [{ title: "0-1-0-0", key: "0-1-0-0" }],
        },
        {
          title: "强弱电_立体停车库(光伏支架)_项目北",
          key: "0-4",
          children: [{ title: "0-1-0-0", key: "0-1-0-0" }],
        },
        {
          title: "结构_立体停车库(地下)_项目北",
          key: "0-5",
          children: [{ title: "0-1-0-0", key: "0-1-0-0" }],
        },
        {
          title: "结构_立体停车库(上部结构)_项目北",
          key: "0-6",
          children: [{ title: "0-1-0-0", key: "0-1-0-0" }],
        },
        {
          title: "强弱电_立体停车库(光伏支架)_项目北",
          key: "0-7",
          children: [{ title: "0-1-0-0", key: "0-1-0-0" }],
        },
        {
          title: "强弱电_立体停车库(光伏支架)_项目北",
          key: "0-8",
          children: [{ title: "0-1-0-0", key: "0-1-0-0" }],
        },
        {
          title: "强弱电_立体停车库(光伏支架)_项目北",
          key: "0-9",
          children: [{ title: "0-1-0-0", key: "0-1-0-0" }],
        },
      ],
    };
  },
  mounted() {},
  methods: {
    //点击数节点
    selectTreeNode(_, e) {
      let { node } = e;
      let { dataRef } = node;
      console.log(e);
      if (!window?.BlackHole3D) {
        return;
      }
      let camLoc = new BlackHole3D.RECamLoc();
      camLoc.camDir = [
        0.2411213717844365,
        0.5862612186179541,
        -0.7734069223981532,
      ];
      camLoc.camPos = [
        13269859.628258329,
        4165447.040689119,
        3481.9490508999984,
      ];
      camLoc.camRotate = [
        0.3302097789546325,
        -0.06525366413969515,
        -0.18255165893918301,
        0.9237847980009353,
      ];
      BlackHole3D.Camera.setCamLocateTo(camLoc, 0.5, 1);
    },

    //点击树-复选框
    treeCheck(checkedKeys, e) {
      let { checked, node } = e;
      let { dataRef } = node;
      console.log({ checkedKeys, e });
    },

    //
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
  },
};
</script>
<style lang="less">
.dataset-tree-container {
  color: #e0f8ff;
  .ant-tree-switcher {
    .anticon {
      font-size: 16px !important;
    }
  }
  .ant-tree-checkbox {
    .ant-tree-checkbox-inner {
      background: rgba(0, 144, 255, 0.2);
      border: 1px solid #0090ff;
      border-radius: 2px;
    }
    &.ant-tree-checkbox-checked {
      .ant-tree-checkbox-inner {
        background: #26ffab;
        border: 1px solid #26ffab;
        &::after {
          border-color: #00316c;
        }
      }
    }
    &.ant-tree-checkbox-indeterminate {
      .ant-tree-checkbox-inner {
        border: 1px solid #26ffab;
        &:after {
          background: #26ffab;
        }
      }
    }
  }
  .ant-tree-node-content-wrapper {
    &:hover,
    &.ant-tree-node-selected {
      background-color: rgba(0, 144, 255, 0.8) !important;
    }
    .ant-tree-title {
      color: #eef9ff;
      font-size: 16px;
      .tree-title {
        overflow: hidden;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
